@import '../../styles/variables.scss';

.discussion-page {
  .page-header {
    @include flex-between;
    margin-bottom: $spacing-lg;
    
    .header-left {
      h1 {
        font-size: $font-size-xxl;
        color: $text-color;
        margin-bottom: $spacing-xs;
      }
      
      p {
        font-size: $font-size-base;
        color: $text-color-secondary;
        margin: 0;
      }
    }
    
    .header-right {
      .ant-btn {
        height: 40px;
        padding: 0 $spacing-lg;
        border-radius: $border-radius-base;
      }
    }
  }
  
  .category-card {
    margin-bottom: $spacing-lg;
    
    .ant-tabs {
      .ant-tabs-nav {
        margin-bottom: 0;
        
        .ant-tabs-nav-wrap {
          .ant-tabs-nav-list {
            .ant-tabs-tab {
              padding: $spacing-sm $spacing-md;
              border-radius: $border-radius-base;
              margin-right: $spacing-sm;
              
              &:hover {
                background-color: rgba($primary-color, 0.1);
              }
              
              &.ant-tabs-tab-active {
                background-color: $primary-color;
                color: $white;
                
                .ant-tabs-tab-btn {
                  color: $white;
                }
              }
            }
          }
        }
      }
    }
  }
  
  .filter-card {
    margin-bottom: $spacing-lg;
    
    .filter-content {
      .ant-input-search {
        .ant-input {
          border-radius: $border-radius-base;
        }
        
        .ant-input-search-button {
          border-radius: 0 $border-radius-base $border-radius-base 0;
        }
      }
      
      .ant-select {
        .ant-select-selector {
          border-radius: $border-radius-base;
        }
      }
    }
  }
  
  .posts-card {
    .ant-card-body {
      padding: 0;
    }
    
    .post-item {
      padding: $spacing-lg;
      border-bottom: 1px solid $border-color;
      cursor: pointer;
      transition: all 0.3s ease;
      
      &:hover {
        background-color: rgba($primary-color, 0.05);
        transform: translateX(4px);
      }
      
      &:last-child {
        border-bottom: none;
      }
      
      .post-title {
        @include flex-between;
        margin-bottom: $spacing-sm;
        
        span {
          font-size: $font-size-lg;
          font-weight: 600;
          color: $text-color;
          flex: 1;
          margin-right: $spacing-md;
        }
      }
      
      .post-content {
        .post-text {
          margin-bottom: $spacing-sm;
          
          p {
            font-size: $font-size-base;
            color: $text-color-secondary;
            line-height: 1.6;
            margin: 0;
            @include text-ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }
        }
        
        .post-tags {
          margin-bottom: $spacing-sm;
          
          .ant-tag {
            margin-right: $spacing-xs;
            margin-bottom: $spacing-xs;
            border-radius: $border-radius-sm;
          }
        }
        
        .post-meta {
          @include flex-between;
          
          .post-author {
            display: flex;
            flex-direction: column;
            gap: $spacing-xs;
            
            span {
              font-size: $font-size-sm;
              color: $text-color-secondary;
              
              &.post-time {
                @include flex-center;
                gap: $spacing-xs;
              }
            }
          }
          
          .post-stats {
            display: flex;
            gap: $spacing-md;
            
            span {
              @include flex-center;
              gap: $spacing-xs;
              font-size: $font-size-sm;
              color: $text-color-secondary;
            }
          }
        }
      }
    }
    
    .pagination-wrapper {
      padding: $spacing-lg;
      text-align: center;
      border-top: 1px solid $border-color;
      
      .ant-pagination {
        .ant-pagination-item {
          min-width: 48px !important;
          height: 48px !important;
          line-height: 46px !important;
          font-size: 18px !important;
          margin: 0 8px !important;
          border-radius: $border-radius-sm;
          
          a {
            font-size: 18px !important;
            line-height: 46px !important;
          }
          
          &.ant-pagination-item-active {
            background-color: $primary-color;
            border-color: $primary-color;
            border-width: 2px !important;
            font-weight: 600 !important;
          }
        }
        
        .ant-pagination-prev,
        .ant-pagination-next {
          min-width: 48px !important;
          height: 48px !important;
          line-height: 46px !important;
          margin: 0 8px !important;
          border-radius: $border-radius-sm;
          
          .ant-pagination-item-link {
            font-size: 18px !important;
            line-height: 46px !important;
          }
        }
        
        .ant-pagination-jump-prev,
        .ant-pagination-jump-next {
          min-width: 48px !important;
          height: 48px !important;
          line-height: 46px !important;
          margin: 0 8px !important;
          
          .ant-pagination-item-container {
            .ant-pagination-item-ellipsis,
            .ant-pagination-item-link-icon {
              font-size: 18px !important;
            }
          }
        }
        
        .ant-pagination-options {
          .ant-pagination-options-quick-jumper {
            height: 48px !important;
            line-height: 48px !important;
            font-size: 18px !important;
            
            input {
              height: 48px !important;
              width: 70px !important;
              font-size: 18px !important;
            }
          }
        }
        
        .ant-pagination-total-text {
          height: 48px !important;
          line-height: 48px !important;
          font-size: 18px !important;
        }
      }
    }
  }
}
